/**
 * @name ImageLightBox
 * @desc 图片全屏展示的弹出层
 */

import Taro from "@tarojs/taro"
import { Image, View, Swiper } from "@tarojs/components"
import { shouldBottom } from "@/utils"

import "./styles.less"

const icoLike = require("@/assets/icons/like.png")

class ImageLightBox extends Taro.Component {
    static defaultPorps = {
        images: [],
        defaultIndex: 0,
        zIndex: 2,
        onClose: () => {},
        onCollect: imageId => {}
    }

    state = {
        currIndex: 0
    }

    componentDidMount() {
        this.setState({ currIndex: this.props.defaultIndex })
    }

    onChange(e) {
        this.setState({ currIndex: e.detail.current })
    }

    onPreview() {
        const path = this.props.images[this.state.currIndex].path
        Taro.previewImage({ urls: [path] })
    }

    onTouchMove(e) {
        // 阻止打开lightbox时,原页面可以滚动;这里是特殊情况,因为"Swiper"是原生组件,不是被event阻止,导致无法滑动
        e.stopPropagation()
    }

    render() {
        const { images, defaultIndex, zIndex, onClose, onCollect } = this.props
        const { currIndex } = this.state

        return (
            <View
                className="image-light-box"
                style={{ zIndex, paddingBottom: shouldBottom ? "34px" : 0 }}
                onTouchMove={this.onTouchMove}
            >
                <Swiper className="image-light-box__swiper" current={defaultIndex} onAnimationfinish={this.onChange}>
                    {images.map(v => (
                        <SwiperItem key={v.id}>
                            <Image
                                className="image-light-box__swiper-image"
                                mode="aspectFit"
                                src={v.path}
                                onClick={this.onPreview}
                            />
                        </SwiperItem>
                    ))}
                </Swiper>

                <View className="image-light-box__bottom-bar">
                    <Image
                        className="image-light-box__bottom-button"
                        src={icoLike}
                        mode="aspectFill"
                        onClick={onClose}
                    />
                    <Image
                        className="image-light-box__bottom-button"
                        src={icoLike}
                        mode="aspectFill"
                        onClick={onCollect.bind(this, images[currIndex].id)}
                    />
                    <Image className="image-light-box__bottom-button" src={icoLike} mode="aspectFill" />
                </View>
            </View>
        )
    }
}

export { ImageLightBox }
